<template>
  <div>
    <div class="search-con search-con-top">
      <div>
        姓名：
        <Input v-model="searchData.name" style="width: 200px"></Input>
        手机号：
        <Input v-model="searchData.mobile" style="width: 200px"></Input>
        状态：
        <Select v-model="searchData.status" style="width:150px" clearable>
          <Option :value="0">待审核</Option>
          <Option :value="1">审核通过</Option>
          <Option :value="2">审核拒绝</Option>
        </Select>

        <Button @click="search" type="primary" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" style="margin-left: 10px;">重置</Button>
      </div>
    </div>
    <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
      <template slot-scope="{ row , index}" slot="makeSlot">
        <Button type="primary" @click="confirm(row.id)" v-if="row.status == 0">通过</Button>
        <Button type="error" @click="refuse(row.id)" style="margin-left: 10px;" v-if="row.status == 0">拒绝</Button>
      </template>
    </Table>
    <br>

    <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize"
      :current="searchData.page">
    </Page>

    <Modal v-model="showAdd" title="提现审核" @on-ok="audit">
      请输入拒绝理由：
      <Input v-model="auditInfo.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder=""></Input>
    </Modal>
  </div>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
export default {
  name: "userPaymentList",
  data() {
    return {
      searchData: {
        page: 1,
        limit: 10
      },
      // 列表
      columns: [
        {
          title: 'ID',
          align: "center",
          key: 'id'
        },
        {
          title: '用户名',
          align: "center",
          key: 'name',
        },
        {
          title: '手机号',
          align: "center",
          key: 'mobile',
        },
        {
          title: '身份证号',
          align: "center",
          key: 'card',
        },
        {
          title: '状态',
          align: 'center',
          key: 'status',
          maxWidth: 110,
          render: (h, param) => {
            let txt = '';
            let color = '';
            if (param.row.status == 0) {
              txt = '待审核';
              color = '';
            } else if (param.row.status == 1) {
              txt = '审核通过';
              color = 'blue';
            } else {
              txt = '审核拒绝';
              color = 'red'
            }
            return h('div', [
              h('span', {
                style: {
                  color: color
                }
              }, txt),
            ]);
          },
        },
        {
          title: '拒绝原因',
          align: "center",
          key: 'reason',
        },
        {
          title: '操作',
          align: "center",
          slot: 'makeSlot',
        },
      ],
      // 数据
      list: [],
      total: 0,
      // 编辑框
      editModal: false,
      formItem: {},
      showAdd: false,
      auditInfo: {
        reason: '',
        id: 0,
        status: 2,
      },
    }
  },
  methods: {
    // 查询管理员信息
    getList() {
      this.$axios('/admin/user/getConfirmList', this.searchData).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    del(id, status) {
      this.$Modal.confirm({
        title: '禁用',
        content: "<p>您确定要禁用该用户吗？</p>",
        onOk: () => {
          this.$axios('/admin/user/confirm', { team_id: id, status: status }).then(res => {
            this.$Message.success('执行成功');
            this.getList();
          });
        },
        onCancel: () => {
          this.$Message.info('取消操作');
        }
      });
    },
    confirm(id) {
      this.$Modal.confirm({
        title: '确认',
        content: "<p>您确定执行该操作吗？</p>",
        onOk: () => {
          this.$axios('/admin/user/confirm', { id: id, status: 1 }).then(res => {
            this.$Message.success('执行成功');
            this.getList();
          });
        },
        onCancel: () => {
          this.$Message.info('取消操作');
        }
      });
    },
    refuse(id) {
      this.auditInfo.id = id;
      this.showAdd = true;
    },
    audit() {
      this.$axios('/admin/user/confirm', this.auditInfo).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
  },
  created() {
    this.getList();
  }
}
</script>
<style></style>
